<template>
  <container title="商品模型" tips="定义商品的基础属性和规格属性">
    <div class="main-card">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:right>
          <el-button size="small" icon="el-icon-search" circle
                     @click.stop="$refs.dialog.show()"></el-button>
          <el-button size="small" icon="el-icon-sort" circle></el-button>
          <el-button size="small" icon="el-icon-plus" circle
                     @click="router.push({name: 'goods-model-add'})"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
                {type: 'selection', width: 55},
              {label: '编号', prop: 'model_id', width: 200},
              {label: '名称', prop: 'model_name'},
              {label: '属性', prop: 'attr_name'},
              {label: '排序', prop: 'sort_weight', align: 'center'},
              {label: '状态', prop: 'status', type: 'switch', align: 'center'},
              {label: '操作', width: 100, type: 'action', fixed: 'right',
                click: onButtonClick, button: [
                  {label: '编辑', type: 'text', code: 'edit'},
                  {label: '删除', type: 'text', code: 'delete'},
              ]}]" />
      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>
</template>
<script lang="ts">
import {defineComponent, onMounted} from 'vue'
import useGoodsModel from './api/goodsModel'
import {useRouter} from 'vue-router'

export default defineComponent({

  name: 'goods-model',

  setup() {
    const model = useGoodsModel()
    const router = useRouter()

    const onButtonClick = (data: { [k: string]: string | number }, action: string) => {
      if (action === 'edit') {
        return router.push({name: 'goods-model-edit', query: {id: data.model_id}})
      }
      if (action === 'delete') {
        return model.deleteDataItem(data)
      }
    }

    onMounted(() => {
      model.loadDataList(1)
    })

    return {
      ...model,
      router,
      onButtonClick
    }
  }
})
</script>